<template>
    <div class="regist">
        <view-head></view-head>
        <div class="r-contain">
            <div class="r-c-c">
        <el-tabs v-model="activeName" @tab-click="handleClick"  :stretch='stretch'>
            <el-tab-pane :label="$t('regist_phone')" name="phone">
                <el-form :model="ruleFormMobile" status-icon :rules="mobileRules" ref="ruleFormMobile" label-width="100px">
                    <el-form-item label-width="0px"  prop="phone">
                        <el-select style="width: 100px" @change="changeEvent" v-model="mobilePrefix" :placeholder="$t('mobile_prefix')">
                            <el-option
                                       v-for="item in areaCode"
                                       :key="item.id"
                                       :value="item.mobile_prefix"
                                       :label="item.mobile_prefix">
                                <span style="float: left">{{ item.country }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px;padding-left: 10px;">{{ item.mobile_prefix }}</span>
                            </el-option>
                        </el-select>
                        <el-input style="width: 190px" @blur="onBlur" v-model.number="ruleFormMobile.phone" :placeholder="$t('input_phone')"></el-input>
                    </el-form-item>
                    <el-form-item label-width="0px"  prop="phone_code">
                        <el-input style="width: 164px" v-model="ruleFormMobile.phone_code" autocomplete="off" :placeholder="$t('input_phone_code')"></el-input>
                        <SMSCode :disabled="disabled" ref="sms_mobile" :codeValue="codeValue"  type="1" :prefix="mobilePrefix"></SMSCode>
                    </el-form-item>
                    <el-form-item label-width="0px"  prop="phone_invite_code">
                        <el-input type="password" v-model="ruleFormMobile.phone_invite_code" autocomplete="off" :placeholder="$t('input_invite_code')"></el-input>
                    </el-form-item>
                    <el-form-item label-width="0px"  prop="phone_pass">
                        <el-input type="password" v-model="ruleFormMobile.phone_pass" autocomplete="off" :placeholder="$t('input_pass')"></el-input>
                    </el-form-item>
                    <el-form-item  label-width="0px" prop="phone_checkPass">
                        <el-input type="password" v-model="ruleFormMobile.phone_checkPass" autocomplete="off" :placeholder="$t('input_pass_re')"></el-input>
                    </el-form-item>

                    <el-form-item label-width="0px" style="text-align: center">
                        <el-button type="primary" @click="submitForm('ruleFormMobile')">{{$t('btn_submit')}}</el-button>
                        <el-button @click="resetForm('ruleFormMobile')">{{$t('btn_reset')}}</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane :label="$t('regist_email')" name="email">
                <el-form :model="ruleFormEmail" status-icon :rules="emailRules" ref="ruleFormEmail" label-width="100px">
                    <el-form-item label-width="0px"  prop="email">
                        <el-input  v-model="ruleFormEmail.email" :placeholder="$t('input_mail')"></el-input>
                    </el-form-item>
                    <el-form-item label-width="0px"  prop="email_code">
                        <el-input style="width: 164px"  v-model="ruleFormEmail.email_code" autocomplete="off" :placeholder="$t('input_email_code')"></el-input>
                        <SMSCode  :disabled="disabled" ref="sms_mail" :codeValue="ruleFormEmail.email"  type="2" prefix=""></SMSCode>
                    </el-form-item>
                    <el-form-item label-width="0px"  prop="email_invite_code">
                        <el-input  v-model="ruleFormEmail.email_invite_code" autocomplete="off" :placeholder="$t('input_invite_code')"></el-input>
                    </el-form-item>
                    <el-form-item label-width="0px"  prop="email_pass">
                        <el-input type="password" v-model="ruleFormEmail.email_pass" autocomplete="off" :placeholder="$t('input_pass')"></el-input>
                    </el-form-item>
                    <el-form-item  label-width="0px" prop="email_checkPass">
                        <el-input type="password" v-model="ruleFormEmail.email_checkPass" autocomplete="off" :placeholder="$t('input_pass_re')"></el-input>
                    </el-form-item>

                    <el-form-item label-width="0px" style="text-align: center">
                        <el-button type="primary" @click="submitForm('ruleFormEmail')">{{$t('btn_submit')}}</el-button>
                        <el-button @click="resetForm('ruleFormEmail')">{{$t('btn_reset')}}</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
            </div>
        </div>
    </div>
</template>

<script>
    import Header from '@/components/__header.vue'
    import SMSCode from '@/components/SMSVcode.vue'
    export default {
        name: "regist",
        components: {
            'view-head':Header,
            'SMSCode':SMSCode
        },
        data() {
            //校验验证码格式
            var codes = /^\d{6}$/;
            var phone = (rule, value, callback) => {
                //let _self=this;
                if(!/^\d{2,}$/.test(value)){
                    callback(new Error('手机号非法'));
                    return;
                }
                if (value === '') {
                    callback(new Error('请输入手机号码'));
                }  else {
                    callback();
                }
            };
            var email = (rule, value, callback) => {
                //let _self=this;
                if(! this.tool_is_email(value)){
                    callback(new Error('邮箱格式非法'));
                    return;
                }
                if (value === '') {
                    callback(new Error('请输入邮箱号'));
                }  else {
                    callback();
                }
            };
            var code = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入短信验证码'));
                } else if (!codes.test(value)) {
                    callback(new Error('验证码输入有误'));
                } else {
                    callback();
                }
            };
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error(this.$t('verification_pass_re')));
                } else {
                    if (this.ruleFormMobile.phone_checkPass !== '') {
                        this.$refs.ruleFormMobile.validateField('phone_checkPass');
                    }
                    callback();
                }
            };
            var validateEmailPass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error(this.$t('verification_pass_re')));
                } else {
                    if (this.ruleFormEmail.email_checkPass !== '') {
                        this.$refs.ruleFormEmail.validateField('email_checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error(this.$t('verification_pass_re_1')));
                } else if (value !== this.ruleFormMobile.phone_pass) {
                    callback(new Error(this.$t('verification_pass_re_2')));
                } else {
                    callback();
                }
            };
            var validateEmailPass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error(this.$t('verification_pass_re_1')));
                } else if (value !== this.ruleFormEmail.email_pass) {
                    callback(new Error(this.$t('verification_pass_re_2')));
                } else {
                    callback();
                }
            };
            return {
                stretch:true,
                disabled:false,
                activeName: 'phone',
                mobilePrefix:'86',
                ruleFormMobile: {
                    phone: '',
                    phone_code: '',
                    phone_invite_code: '',
                    phone_pass:'',
                    phone_checkPass:''
                },
                mobileRules: {
                    phone:[
                        { validator: phone, trigger: 'blur' }
                    ],
                    phone_code:[
                        { validator: code, trigger: 'blur' }
                    ],
                    phone_pass: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    phone_checkPass: [
                        { validator: validatePass2, trigger: 'blur' }
                    ]
                },
                ruleFormEmail:{
                    email:'',
                    email_code:'',
                    email_invite_code:'',
                    email_pass:'',
                    email_checkPass:''
                },
                emailRules:{
                    email:[
                        { validator: email, trigger: 'blur' }
                    ],
                    email_code:[
                        { validator: code, trigger: 'blur' }
                    ],
                    email_pass: [
                        { validator: validateEmailPass, trigger: 'blur' }
                    ],
                    email_checkPass: [
                        { validator: validateEmailPass2, trigger: 'blur' }
                    ]
                },
                mobilePrefixData: {cn_name: "中国",country: "China",en_name: "China",mobile_prefix: "86",status: 1,idn: "CN"},
                areaCode:[],
                codeValue:'',
                send_type:1,//
            };
        },
        created(){
            this.isLogin();
            this.getMobilePr();
        },
        methods: {
            onBlur(){
                if(this.activeName=="phone"){
                    this.codeValue=this.ruleFormMobile.phone;
                }else if(this.activeName=="email"){
                    this.codeValue=this.ruleFormEmail.email;
                }
            },
            getMobilePr(){
                let _self=this;
                this.axios.get(this.MOBILE_PREFIX)
                    .then(function (res) {
                        if(res.data.status=="success"){
                            _self.areaCode=res.data.data;
                            return;
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            submitForm:function (formName) {
                let _self=this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var data="";
                        if(this.activeName=="phone"){
                            data={
                                mobile_prefix: this.mobilePrefix,
                                type: this.send_type,
                                mobile: this.ruleFormMobile.phone,
                                password: this.ruleFormMobile.phone_pass,
                                invite_id: this.ruleFormMobile.phone_invite_code,
                                code: this.ruleFormMobile.phone_code,
                            };
                        }else if(this.activeName=="email"){
                            data={
                                mobile_prefix: this.mobilePrefix,
                                type: this.send_type,
                                email: this.ruleFormEmail.email,
                                password: this.ruleFormEmail.email_pass,
                                invite_id: this.ruleFormEmail.email_invite_code,
                                code: this.ruleFormEmail.email_code,
                            };
                        }
                        this.axios
                            .post(this.USER,data)
                            .then(res => {
                                if (res.data.status == 'success') {
                                    _self.$message({
                                        showClose: true,
                                        message: _self.$t('regist_success'),
                                        type: 'success'
                                    });
                                    this.$router.push('/login')
                                } else {
                                    this.$message({message: res.data.msg});
                                }
                            })
                            .catch(res => {
                                console.log(res.data);
                            });
                    }

                    // else if (!this.checked == true) {
                    //     this.$message({
                    //         showClose: true,
                    //         message: '请阅读用户服务协议并勾选',
                    //         type: 'error'
                    //     });
                    // }
                });
            },
            handleClick(tab) {
                if(tab.name=="phone"){
                   this.send_type=1;
                }else if(tab.name=="email"){
                    this.send_type=2;
                }
            },
            changeEvent(val){
                let obj = {};
                obj = this.areaCode.find((item)=>{
                    return item.mobile_prefix === val;//筛选出匹配数据
                });
                if(obj!="" && obj!=undefined){
                    this.mobilePrefix=obj.mobile_prefix;
                    this.mobilePrefixData=obj;
                }
            },
            //重置表单数据
            resetForm:function (formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

<style scoped lang="scss">
.r-contain{
    padding-top: 100px;
    .r-c-c{
        width: 290px; margin: 0px auto; padding: 20px 60px;box-shadow: 0 4px 10px 0 #cbd2db;
    }
}
</style>
